<template>
    <div class='listTV'>
        <div class="heads" style="width:100%;height:60px;">
            <table style="width:94%;table-layout:fixed;margin-left:3%;padding-top:20px">
                <colgroup>
                    <col/>
                    <col/>
                    <col/>
                </colgroup>
                <tr>
                    <td style='color:#fff;font-size:150%'><img src='../../../assets/logo.png' class='logoImg'/>{{company}}</td>
                    <td style='color:#1c3ed5;font-size:260%;text-align:center;font-weight:bold'>
                        <div style='position:absolute;width:20%;border-radius:50px;background:#fff;height:120px;font-size:110%;left:40%;top:-60px'>
                            <div style='position:relateive;font-size:110%'>
                                <div style='font-size:80%;border-top:1px solid #1c3ed5;position:absolute;top:60px;width:100%;line-height:60px;'>
                                    {{title}}
                                </div>
                            </div>
                        </div>
                        
                    </td>
                    <td style='color:#fff;font-size:150%;text-align:center' id="DateTime">2020-09-19 16:04</td>
                </tr>
            
            </table>
        </div>
        <div class='table_content'>
            <div class='content_item'>
                <div class='head_item'>
                    {{title2}}
                </div>
                <div class='tables'>
                    <table  cellpadding=0 cellspacing=0>
                        <colgroup>
                            <col v-for="(item,index) in list" :key="index" :style="item.colWidth"/>
                        </colgroup>
                        <tr>
                            <td v-for="(item,index) in list" :key="index" class='td'>{{item.names}}</td>
                        </tr>
                        <tr v-for="(item,index) in data" :key="index">
                            <td v-for="(item2,index2) in list" :key="index2" class='td'>{{item[item2.field]}}</td>
                        </tr>
                    </table>
                </div>
                <div class='head_item2'>
                    {{title3}}
                </div>
                <div class='tables2'>
                    <table  cellpadding=0 cellspacing=0>
                        <colgroup>
                            <col v-for="(item,index) in list2" :key="index" :style="item.colWidth"/>
                        </colgroup>
                        <tr>
                            <td v-for="(item,index) in list2" :key="index" class='td'>{{item.names}}</td>
                        </tr>
                        <tr v-for="(item,index) in data2" :key="index">
                            <td v-for="(item2,index2) in list2" :key="index2" class='td'>{{item[item2.field]}}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[],
            list2:[],
            appid:"",
            filename:[],
            data:[],
            data2:[],
            limit:"7",
            title:"",
            title2:"",
            title3:"",
            company:"",
            ver:""
        }
    },
    created(){
        if(this.$route.query.appid){
            this.appid=this.$route.query.appid;
        }
        if(this.$route.query.filename){
            this.filename=this.$route.query.filename.split(",");
        }
       
        if(!this.appid){
            this.appid="business";
        }
        this.loadData();
        this.loadData2();
        let sef=this;
        setInterval(function () {
            sef.fnDate();
        }, 1000);
    },
    methods:{
        loadData(){
            let sef=this;
            this.$post(this.appid,'api/view/commonListJson',{
                appid:this.appid,
                listname:escape(this.filename[0])
            }).then(data=>{
                sef.list=data[0].list;
                sef.showTable=true;
                sef.loading=false;
                sef.title=data[0].title;
                sef.title2=data[0].title2;
                sef.limit=data[0].limit;
                sef.company=data[0].companys;
                sef.ver=data[0].ver;
                if(localStorage.getItem("ver")!=sef.ver){
                    localStorage.setItem("ver",sef.ver);
                    location. reload();
                }
                sef.loadTable(data[0].url);
            })
        },
        loadTable(url){
         
            this.$post(this.appid,url,{
                appid:this.appid,
                listname:escape(this.filename[0]),
                limit:this.limit
            }).then(data=>{
                this.data=data.data;
            });
        },
        loadData2(){
            let sef=this;
            this.$post(this.appid,'api/view/commonListJson',{
                appid:this.appid,
                listname:escape(this.filename[1])
            }).then(data=>{
                sef.list2=data[0].list;
               
                sef.title3=data[0].title2;
                
                sef.loadTable2(data[0].url);
            })
        },
        loadTable2(url){
         
            this.$post(this.appid,url,{
                appid:this.appid,
                listname:escape(this.filename[1]),
                limit:this.limit
            }).then(data=>{
                this.data2=data.data;
            });
        },
        fnDate() {
            var oDiv = document.getElementById("DateTime");
            var date = new Date();
            var year = date.getFullYear();//当前年份
            var month = date.getMonth();//当前月份
            var data = date.getDate();//天
            var hours = date.getHours();//小时
            var minute = date.getMinutes();//分
            var second = date.getSeconds();//秒
            var time = year + "-" + this.fnW((month + 1)) + "-" + this.fnW(data) + " " + this.fnW(hours) + ":" + this.fnW(minute) + ":" + this.fnW(second);
            var a = new Array("日", "一", "二", "三", "四", "五", "六");
            var week = new Date().getDay();
            var str = "星期" + a[week];
            oDiv.innerHTML = time + "　" + str;
    },
    //补位 当某个字段不是两位数时补0
    fnW(str){
        return str > 9 ?  str :  "0" + str;}
    }
}
</script>
<style scoped>
    .listTV{
        background:#1c3ed5;
        padding:0;
        margin:0;
        height:100%;
        width:100%;
        display:flex;
        flex-direction: column;
    }
    .logoImg{
        width:30px;
        margin-right:10px;
        vertical-align: middle;
    }
    .table_content{
        flex:1;
        box-sizing: border-box;
        margin:40px;
    }
    .content_item{
        display:flex;
        flex-direction: column;
        height:100%;
        width:100%;
    }
    .head_item{
        height:50px;
        background:#fff;
        border-radius: 10px 10px 0 0;
        text-align: center;
        color:#1c3ed5;
        font-size:22px;
        border-top:1px solid #1c3ed5;
        line-height:50px;
    }
    .tables{
        flex:1;
        background:#1726a5;
        color:#5077f8;
    }
    .tables table{
        table-layout:fixed;
        width:100%;
        padding:10px;
        color:#fff;
    }
    .head_item2{
        height:50px;
        background:#fff;
        text-align: center;
        color:#1c3ed5;
        font-size:22px;
        border-top:1px solid #1c3ed5;
        line-height:50px;
    }
    .tables2{
        flex:1;
        background:#1726a5;
        color:#5077f8;
        border-radius: 0 0 10px 10px;
    }
    .tables2 table{
        table-layout:fixed;
        width:100%;
        padding:10px;
        color:#fff;
    }
    .td{
        padding:5px  !important;
    }

</style>>
